<template>
	<view>
		<block v-if="isHasDataFlag">
			<view class="pjHead"></view>
			<view class="zhPj padd">
				<view class="innerZhPj">
					<view class="zhpjTit hasFlex">
						<view>综合评价</view>
						<view><htz-rate v-model="zhPjScore" :size="80" :gutter="5" :readonly="true" :type="0"></htz-rate></view>
					</view>
					<view class="pjContent" :class="zhPjScore == 0 ? 'spec' : ''">{{zhPjContent == '' ? '等待用户完成所有项目评价' : zhPjContent}}</view>
				</view>
			</view>
			<view class="pjList padd">
				<view class="listItem"
					v-for="(item,index) in pjList"
					:key="index"
				>
					<view class="listItemTit hasFlex">
						<image class="img" src="../../../static/images/groupService/ttImg.png"></image>
						<view class="tit">{{item.serviceName}}</view>
					</view>
					<view class="pjContent spec">{{item.pjContent}}</view>
					<view class="listItemBot spaceBet">
						<view>{{item.pjTime}}</view>
						<view><htz-rate v-model="item.pjScore" :size="40" :gutter="5" :readonly="true" :type="0"></htz-rate></view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</block>
	</view>
</template>

<script>
	import { getMyGroupOrderPj } from '@/api/mine/comment'
	export default {
		data(){
			return{
				isHasIconR:false,
				otherBgCls:'orangeBg',
				orderId:'',
				isHasDataFlag:null,
				pjList:[],
				zhPjScore:0,
				zhPjContent:''
			}
		},
		onLoad(options){
			this.orderId = options.orderId;
			this.loadGroupPjList();
		},
		methods:{
			loadGroupPjList(){
				var field = { id:this.orderId };
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				getMyGroupOrderPj(field).then(res=>{
					this.isHasDataFlag = true;
					if(res.data.datas.pjScore != undefined){
						this.zhPjScore = res.data.datas.pjScore;
						this.zhPjContent = res.data.datas.pjContent;
					}
					this.pjList = res.data.datas.odPjList;
				}).catch(err=>{
					if(err.data.code == 50001){
						this.isHasDataFlag = false;
					}
					//console.log(err)
				});
			},
			backPage(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.pjList{
		margin-top: 30rpx;
		.listItemBot{
			font-size: 24rpx;
			color: $pss-text-colora;
			margin-top: 10rpx;
		}
		.listItem{
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
			.listItemTit{
				align-items: center;
				margin-bottom: 10rpx;
				.img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
				.tit{
					font-size: 30rpx;
					color: $pss-text-color3;
				}
			}
		}
	}
	.innerZhPj{
		border-radius: 15rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,.1);
		margin-top: -80rpx;
		background: #fff;
		padding: 20rpx 20rpx 30rpx;
		.zhpjTit{
			align-items: center;
			font-size: 26rpx;
			color: $pss-text-color8;
		}
	}
	.pjContent{
		font-size: 28rpx;
		color: $pss-text-color3;
		&.spec{
			color: $pss-text-color8;
		}
	}
	.pjHead{
		background: $pss-color-primary_1;
		height: 100rpx;
		/* #ifdef APP-PLUS */
		margin-top: calc(90rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-top: 90rpx;
		/* #endif */
	}
</style>